div#general-elements{
	padding: 10px;
}
div.element-list{
	padding: 2px;
	margin-left: 5%;
	margin-right: 5%;
	cursor: move;
	font-size: 14px;
	/*float: left;*/
	z-index: 10000;
	width: 80px;
	background: -moz-linear-gradient(left, #2F2727, #1a82f7);
	background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
	border-radius: 5px;
	color: white;
	text-align: center;
	font-weight: bold;
	width: 90%;
}
div#general-elements div:hover{
	background: -moz-linear-gradient(left, #ff1717, #ff8c8c);
	background: -webkit-linear-gradient(left, #ff1717, #ff8c8c);
	/*#8cff8c;*/
}

/*
 * Attribute design
 */
div#attributes{
	width: 100%;
	height: 100%;
}

div#general-attributes, div#element-attributes{
	width: 100%;
	height: 100%;
	font-size: 12px;
	overflow-y: scroll;
}
div#general-attributes td{
	border-bottom: 1px solid pink;
}
div#general-attributes td.editable:hover{
	background-color: #ffe8f3;
	cursor: pointer;
}
div#general-attributes td.attr-name{
	border-right: 1px solid green;
}

table td.readyTodrop{
	background-color: green;
}

/* element attribute*/
div#element-attributes th{
	border-bottom: 1px solid red;
}
div#element-attributes td{
	border-bottom: 1px solid pink;
}
div#element-attributes td.editable:hover{
	background-color: #ffe8f3;
	cursor: pointer;
}
div#element-attributes td.attr-name{
	border-right: 1px solid green;
}

/*
 * end attribute
 */

div#card{
	width: 100%;
	height: 100%;
	position: relative;
	overflow-x: scroll;
}
div.card-hover{
	background-color: #b0b0ff;
}

/*
 * Image elements list
 */
div#img-elements{
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}
div#img-elements img{
	width: 60px;
}

div.img-icon{
	padding: 5px;
	float: left;
	text-align: center;
	border: 1px solid green;
	margin: 1px;
}
div.img-icon img{
	display: block;
	width: 60px;
	height: 45px;
}
div.img-icon span{
	font-family:"Bookman Old Style";
	font-size: 11px;
}
/*
 * End image list
 */

/*
 * Animation accordion
 */
div#general-animations{
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	font-size: 11px;
}
div#general-animations div.animation{
	padding: 5px;
	border-radius: 10px;
	margin: 2px;
}

div#general-animations div.animation:hover{
	background: #bfbfff;
}

div#general-animations div.element-id{
	font-family: verdana;
	font-size: 13px;
	color: white;
	background-color: #111111;
	border-radius: 5px;
	padding: 5px;
	position: relative;
	opacity: 0.8;
}
div#general-animations div.animation-name{
	/*background: #ffcce6;*/
	border-radius: 5px;
	padding: 5px;
	position: relative;
	text-align: center;
	color: #b00000;	
	font-size: 13px;
	margin-top: 1px;
}
div#general-animations div.animation-name:hover{
}

div#general-animations div.animation-name ul.add-animation-option{
	float: right;
	top: -4px;
	position: relative;
}
div#general-animations div.animation-name ul.remove-animation-option{
	float: left;
	top: -4px;
	position: relative;
}
div#general-animations div.animation-name ul#icons li{
	margin: 0px;
}

div#general-animations div.options{
	margin-top:5px;
	background: #003651;
	color: white;
	border-radius: 5px;
	width: 80%;
}
div#general-animations table.options{
	background: #003651;
	color: white;
	border-radius: 5px;
}
div#general-animations table.options td:first-child{
	border-right: 1px solid green;
}
div#general-animations table.options td{
	border-bottom: 1px solid #91ff91;
}

/*
 * End Animation accordion
 */

/*
 * Functional button
 */
ul.add-image-button{
	position: absolute;
	top: 0px;
	right: 14px;
}
ul.add-attribute-button, ul.import-attribute-button{
	float: right;
}
ul.add-animation-button{
	float: left;
}
ul.play-animation{
	float: right;
}

img.delete-attribute-button{
	float: right;
	display: none;
}
img.delete-animation-button{
	float: right;
	display: none;
}
img.delete-option-button{
	float: right;
	display: none;
}

div#elem-cltr{
	z-index: 10000;
}
